<template>
  <div class="head">
    <div class="title"></div>
    <div class="avatar">
      <a-avatar>
        <img alt="avatar" src="../../public/WorkBench_Img/☆_63597721_p1.png" />
      </a-avatar>
    </div>
  </div>
  <a-layout class="layout-demo">
    <a-layout-sider collapsible breakpoint="xl">
      <a-menu :default-selected-keys="['0_1']" :style="{ width: '100%' }" @menu-item-click="onClickMenuItem">
        <a-menu-item key="0_1" @click="router.push('/WorkBench')">
          <IconHome></IconHome>
          首页
        </a-menu-item>

        <a-menu-item key="0_2" @click="router.push('/data')">
          <icon-bar-chart />
          图书管理
        </a-menu-item>

        <a-sub-menu key="1">
          <template #title>
            <icon-menu /> 更多
          </template>
          <a-menu-item key="1_1">Menu 1</a-menu-item>
          <a-menu-item key="1_2">Menu 2</a-menu-item>
          <a-sub-menu key="2" title="Navigation 2">
            <a-menu-item key="2_1">Menu 1</a-menu-item>
            <a-menu-item key="2_2">Menu 2</a-menu-item>
          </a-sub-menu>
        </a-sub-menu>

        <a-menu-item key="3" @click="router.push('/userinfo')" title="用户">
          <IconHome></IconHome>
          用户
        </a-menu-item>
      </a-menu>
      <!-- trigger -->
      <template #trigger="{ collapsed }">
        <IconCaretRight v-if="collapsed"></IconCaretRight>
        <IconCaretLeft v-else></IconCaretLeft>
      </template>
    </a-layout-sider>


    <a-layout>

      <a-layout-content>
        <RouterView />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script setup>
import { useRouter } from 'vue-router';
import { RouterView } from 'vue-router';



const router = useRouter();
</script>


<style lang="scss" scoped>
.head {
  width: 100%;
  height: 7vh;
  overflow: hidden;
  position: relative;

  .title {
    width: 618px;
    height: 700px;
    background-image: url('../../public/WorkBench_Img/☆_63597721_p1.png');
    margin-top: -210px;
    position: absolute;
    right: 150px;
  }

  .avatar {
    position: absolute;
    right: 30px;
    top: 20%;
  }
}

::-webkit-scrollbar {
  display: none;
  /* Chrome Safari */
}

.layout-demo {
  height: 93vh;
  width: 100vw;
  background: var(--color-fill-2);
  /* border: 1px solid var(--color-border); */
}

.layout-demo :deep(.arco-layout-sider) .logo {
  height: 32px;
  margin: 12px 8px;
  background: rgba(255, 255, 255, 0.2);
}

.layout-demo :deep(.arco-layout-sider-light) .logo {
  background: var(--color-fill-2);
}

.layout-demo :deep(.arco-layout-header) {
  height: 64px;
  line-height: 64px;
  background: var(--color-bg-3);
}

.layout-demo :deep(.arco-layout-footer) {
  height: 48px;
  color: var(--color-text-2);
  font-weight: 400;
  font-size: 14px;
  line-height: 48px;
}

.layout-demo :deep(.arco-layout-content) {
  color: var(--color-text-2);
  font-weight: 400;
  font-size: 14px;
  background: var(--color-bg-3);
}

.layout-demo :deep(.arco-layout-footer),
.layout-demo :deep(.arco-layout-content) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--color-white);
  font-size: 16px;
  font-stretch: condensed;
  text-align: center;
}
</style>
